<template>
  <div class="problem-container">
    <div class="imageArea">
      <img v-for="p in problems" :key="p.index" :alt="p.alt" :src="require(`../assets/survey/problem${p.index}.png`)">
    </div>
  </div>
</template>

<script>
export default {
  name: 'Problems',
  data(){
    return{
      problems:[
        {
          index: 1,
          alt: '内向与外向',
        },
        {
          index: 2,
          alt: '同质与多元',
        },
        {
          index: 3,
          alt: '封闭与开放',
        },
        {
          index: 4,
          alt: '传统与现代',
        }
      ]
    }
  },
  mounted(){
    /*添加页面滚动到当前位置时出现的效果*/
    const imageArea = document.querySelector('.imageArea')
    const images = document.querySelectorAll('.imageArea > img')
    window.addEventListener('scroll', function(){
      const shift = window.innerHeight - imageArea.getBoundingClientRect().top
      if(shift > 0){
        images.forEach(element => {
          element.classList.add('wow')
        }
      )}
    })
  }
}
</script>

<style scoped>
.problem-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80vh;
}

.imageArea{
  width: 80vh;
  height: 100%;
  position: relative;
}


.imageArea > img{
  position: absolute;
}

.imageArea > img:nth-child(1){
  height: 40%;
  top: 5%;
  right: 12%;
}
.imageArea > img:nth-child(1).wow{
  animation: gather1 1s ease-out;
}

.imageArea > img:nth-child(2){
  height: 45%;
  bottom: 9%;
  left: 2%;
}
.imageArea > img:nth-child(2).wow{
  animation: gather2 1s ease-out;
}

.imageArea > img:nth-child(3){
  height: 55%;
  top: 0;
  left: 0;
}
.imageArea > img:nth-child(3).wow{
  animation: gather3 1s ease-out;
}

.imageArea > img:nth-child(4){
  height: 65%;
  bottom: 3%;
  right: 3%;
}
.imageArea > img:nth-child(4).wow{
  animation: gather4 1s ease-out;
}

@media screen and (max-width: 1023px) {
  .problem-container{
    height: min(80vw, 500px);
  }

  .imageArea{
    width: min(80vw, 500px);
  }
}

@keyframes gather1 {
  0%{
    opacity: 0;
    transform: translateX(50%) translateY(-50%);
  }
}
@keyframes gather2 {
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(50%);
  }
}
@keyframes gather3 {
  0%{
    opacity: 0;
    transform: translateX(-50%) translateY(-50%);
  }
}
@keyframes gather4 {
  0%{
    opacity: 0;
    transform: translateX(50%) translateY(50%);
  }
}

</style>